<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/ugcUploader.js"></script>
	</head>

	<body>

		<img alt="" src="./mission_upload_pictures.png" class="uploadVideo">
		<input type="file" id="videosrcHiden" style="display: none;" />
		<input id="videoSrc" name="videoSrc" style="display: none;" />
		<a id="jindu"></a>

		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

		<script>
			var getSignature = function(callback) {
				$.ajax({
					url: "/eduVodie/shangchuan", //服务器获取客户端上传签名的URL
					type: "POST",
					success: function(result) {
						//result.returnData.signature为获取到的签名
						callback(result);
						//callback(result.returnData.signature);
					}
				});
			};


			$('.uploadVideo').click(function() {
				$("#videosrcHiden").trigger("click")

			})

			$('#videosrcHiden').on('change', function(e) {
				var videoFile = this.files[0];
				var resultMsg = qcVideo.ugcUploader.start({
					videoFile: videoFile,
					getSignature: getSignature,
					allowAudio: 1,
					isTranscode: 1,
					success: function(result) {
						console.log(result)
						$("#jindu").text("上传成功")
					},
					error: function(result) {
						console.log(result)
					},
					progress: function(result) {
						var pro = result.curr.toFixed(2) * 100;
						$("#jindu").text("上传进度：" + parseFloat(pro).toFixed(2) + "%")
					},
					finish: function(result) {
						var url = result.videoUrl;
						console.log(result);
						var mp4 = '<video width="320" height="240" controls="controls"><source src=' + url +
							' type="video/mp4" /></video>';


						$('#upload').after(mp4);
						$("#jindu").text("上传完成")

					}
				});
			});
		</script>
	</body>
</html>
